<template>
  <div class="login flex flex-col">
    <div class="top-left-word">
      <img src="./images/Top-leftword.png">
    </div>
    <div class="bottom-img">
      <img src="./images/bottom.png">
    </div>
    <div class="flex-1 flex items-center justify-center">
      <div class="login-card flex rounded-md">
        <div class="flex-1 h-full hidden md:inline-block">
          <image-contain :src="config.webBackdrop" :width="400" height="100%"/>
        </div>
        <div class="absolute inset-0 flex items-center justify-center" style="right: -850px;">
          <img src="./images/box.png">
          <div
              class="login-form bg-transparent flex flex-col justify-center px-10 py-10 md:w-[400px] w-[375px] flex-none mx-auto"
          >
            <div class="text-center text-3xl font-medium mb-8">后台管理系统</div>
            <el-form ref="formRef" :model="formData" size="large" :rules="rules">
              <el-form-item prop="account">
                <el-input
                    autocomplete="off"
                    v-model.trim="formData.account"
                    placeholder="请输入账号"
                    @keyup.enter="handleEnter"
                >
                  <template #prepend>
                    <img src="./images/yonghuming.png">
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                    ref="passwordRef"
                    v-model="formData.password"
                    show-password
                    placeholder="请输入密码"
                    @keyup.enter="handleLogin"
                >
                  <template #prepend>
                    <img src="./images/ai-password.png">
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div class="flex items-center">
                  <el-input
                      v-model="formData.code"
                      placeholder="请输入验证码"
                      @keyup.enter="handleLogin"
                      class="transparent-input"
                  >
                    <template #prepend>
                      <img src="./images/verify.png">
                    </template>
                  </el-input>
                  <div
                      class="ml-4 w-[100px] flex-none cursor-pointer"
                      @click="getLoginCaptcha"
                  >
                    <img class="w-full" :src="codeImg" alt=""/>
                  </div>
                </div>
              </el-form-item>
            </el-form>
            <div class="mb-5">
              <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox>
            </div>
            <el-button type="primary" size="large" :loading="isLock" @click="lockLogin">
              登录
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref, shallowRef} from 'vue'
import type {InputInstance, FormInstance} from 'element-plus'
import useAppStore from '@/stores/modules/app'
import useUserStore from '@/stores/modules/user'
import cache from '@/utils/cache'
import {ACCOUNT_KEY} from '@/enums/cacheEnums'
import {PageEnum} from '@/enums/pageEnum'
import {useLockFn} from '@/hooks/useLockFn'
import {loginCaptcha} from '@/api/user'

const passwordRef = shallowRef<InputInstance>()
const formRef = shallowRef<FormInstance>()
const appStore = useAppStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const remAccount = ref(false)
const config = computed(() => appStore.config)
const codeImg = ref()
const formData = reactive({
  account: '',
  password: '',
  code: '',
  uuid: ''
})
const rules = {
  account: [
    {
      required: true,
      message: '请输入账号',
      trigger: ['blur']
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur']
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: ['blur']
    }
  ]
}

const getLoginCaptcha = async () => {
  const data = await loginCaptcha()
  formData.uuid = data.uuid
  codeImg.value = data.img
}
// 回车按键监听
const handleEnter = () => {
  if (!formData.password) {
    return passwordRef.value?.focus()
  }
  handleLogin()
}
// 登录处理
const handleLogin = async () => {
  await formRef.value?.validate()
  // 记住账号，缓存
  cache.set(ACCOUNT_KEY, {
    remember: remAccount.value,
    account: remAccount.value ? formData.account : ''
  })
  try {
    await userStore.login(formData)
  } catch (error) {
    getLoginCaptcha()
  }
  const {
    query: {redirect}
  } = route
  const path = typeof redirect === 'string' ? redirect : PageEnum.INDEX
  router.push(path)
}
const {isLock, lockFn: lockLogin} = useLockFn(handleLogin)

onMounted(() => {
  const value = cache.get(ACCOUNT_KEY)
  getLoginCaptcha()
  if (value?.remember) {
    remAccount.value = value.remember
    // formData.account = value.account
    formData.account = null
  }
})
</script>

<style lang="scss" scoped>
.login {
  background-image: url('./images/backdrop1.png');
  @apply min-h-screen bg-no-repeat bg-center bg-cover;
  .login-card {
    height: 400px;

    :deep(.el-input-group__prepend) {
      padding: 0 15px;
    }

    .flex-1 {
      display: none; /* 将左侧图片的父元素设为隐藏 */
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
    }

    .login-form {
      position: absolute; /* 设置为绝对定位 */
      top: 50%; /* 以父元素为参照物，上边缘距离父元素顶部的距离为50% */
      left: 50%; /* 以父元素为参照物，左边缘距离父元素左侧的距离为50% */
      transform: translate(-50%, -50%); /* 通过位移来使表单居中显示 */
      color: white; /* 加上color: white; */
    }
    .text-center {
      color: white !important; /* 加上 !important 来覆盖其他样式 */
    }
    .transparent-input {
      background-color: transparent !important;
    }
    .el-input__placeholder {
      color: white !important;
    }
  }

}
::v-deep .login-form .el-input .el-input__wrapper{
  background-color: transparent;
}
::v-deep .login-form .el-input .el-input-group__prepend{
  background-color: transparent;
  color: white; // 设置输入框中文字颜色为白色
}
::v-deep .login-form .el-input .el-input--large .el-input-group .el-input-group--prepend{
  border: 1px solid blue !important;
}
::v-deep .login-form .el-input__inner{
  color: white; // 设置输入框中文字颜色为白色
}
.top-left-word{
  width: 50vw;
  position: relative;
}
.top-left-word img{
  position: absolute;
  top: 70px;
  left: 80px;
}
.bottom-img{
  width: 50vw;
  position: relative;
}
.bottom-img img{
  position: absolute;
  top: 800px;
  left: 80px;
}

</style>
<style>
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
  background-color:transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}
input {
  background-color:transparent;
}
</style>
